<script setup>
import { computed } from 'vue'
import { NButton, NP } from 'naive-ui'

const props = defineProps({
  todos: Array,
  filterType: String
})
const emit = defineEmits(['delete', 'toggle'])

// 筛选逻辑
const filteredTodos = computed(() => {
  switch (props.filterType) {
    case 'active': return props.todos.filter(item => !item.completed)
    case 'completed': return props.todos.filter(item => item.completed)
    default: return props.todos
  }
})
</script>

<template>
  <div v-if="filteredTodos.length" class="todo-list">
    <div v-for="item in filteredTodos" :key="item.id" class="todo-item">
      <span
          @click="() => emit('toggle', item.id)"
          :style="{ textDecoration: item.completed ? 'line-through' : 'none' }"
      >
        {{ item.text }}
      </span>
      <n-button @click="() => emit('delete', item.id)" type="error">
        删除
      </n-button>
    </div>
  </div>
  <n-p v-else class="empty-tip">暂无待办事项</n-p>
</template>

<style scoped>
.todo-list {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
.todo-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.todo-item:last-child {
  border-bottom: none;
}
.todo-item span {
  cursor: pointer;
  flex: 1;
}
.empty-tip {
  text-align: center;
  color: #888;
}
</style>